<template>
    <div class="life-box">
        <div class="life-menu">
                    <el-menu

                            :uniqueOpened="true"
                            default-active="1"
                            class="el-menu-vertical-demo"
                            background-color="#171D20"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                    >

<!--                        一级菜单-->
                        <el-submenu :index="String(index+1)" v-for="(item,index) in obj.menu">
                            <template #title>
                                <i :class="item.icon"></i>
                                <span>
                                    {{item.title}}
                                </span>
                            </template>
<!--                            二级菜单-->
                            <el-menu-item index="1-1" v-for="i in item.submenu">

                                <router-link style="display:inline-block;text-decoration: none;color: white;width: 100%;height: 100%;"
                                             :to="i.to"
                                            @click="obj.viewTitle=i.title"
                                >
                                    {{i.title}}
                                </router-link>
                            </el-menu-item>
                        </el-submenu>

                    </el-menu>
        </div>
        <div class="life-container">
            <div class="life-container-title">
                {{obj.viewTitle}}
            </div>
            <div class="life-container-view">
                <router-view ></router-view>
            </div>

        </div>
    </div>

</template>

<script>

    import {useRoute} from "vue-router";
    import {reactive, ref} from "@vue/reactivity";

    import RotateCarBox from "@/components/box/RotateCarBox";
    export default {
        name: "Life.vue",
        components: {RotateCarBox},
        setup(){
            let classifyId=ref()
            let obj=reactive({
                viewTitle:"相册",
                menu:[
                    {
                        title:"生活日常",
                        icon:"el-icon-location",
                        submenu:[
                            {
                                title: "相册",
                                icon:"",
                                to:"/life/photoAlbum",
                            },
                            {
                                title: "音乐",
                                icon:"",
                                to:"/bc/music",
                            }
                        ],

                    },
                    {
                        title:"测试",
                        icon:"el-icon-s-platform",
                        submenu:[
                            {
                                title: "敲木鱼",
                                icon:"",
                                to:"/life/templeBlock",
                            },
                            {
                                title: "贪吃蛇",
                                icon:"",
                                to:"/life/snake",
                            }
                        ],

                    }
                ]
            })



            function load(){

            }

            // onMounted()



            return{
                classifyId,
                obj,
                load
            }

        },
        beforeCreate() {
            const route=useRoute()
            if( route.query.classifyId!=null){
                this.classifyId=Number( route.query.classifyId)
            }
        }
    }
</script>

<style scoped lang="less">
    .life-box{
        width: 100%;
        min-height: 2100px;
        background-color: var(--theme-color);

        display: flex;

        .life-menu{
            margin-top: 50px;
            flex: 2;
            height: 100%;
            border: none;
            outline: none;

        }
        .life-container {
            flex: 8;
            height: 100%;
            display: flex;
            flex-direction: column;

            .life-container-title{
                width: 100px;
                min-height: 50px;

                font-size: 20px;
                float: left;
                color:#e5e5e5;
                margin-left: 40px;
                margin-top: 50px;
                border-left: 1px solid #e5e5e5;

            }
            .life-container-view{
                width: 100%;
            }

        }
    }

</style>